<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>房源标题</title>
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">
    <link rel="stylesheet" th:href="@{/airent/css/housedesc.css}">
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/font-awesome-4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap-star-rating-master/css/star-rating.min.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap-star-rating-master/themes/krajee-svg/theme.min.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/animate.min.css}" />
    <style type="text/css">
        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            width: 100%;
            height: 450px;
            border: #ccc solid 1px;
        }

        #chat{
            display: none;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 55%;
            height: 55%;
            padding: 20px;
            border: 10px solid orange;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
        #carouselExampleControls {
            height: 400px;
        }
        .carousel-item>img {
            height: 400px;
        }
        .nocontain{
            opacity: 0.5;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=3.0&ak=nGGIg5o99yFrRmVRM5sgX9LUi39ObA3Y"></script>
</head>

<body>

<!--引入导航栏-->
<div th:replace="~{head/topbar::topBar}"></div>

<div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-6 ">

        <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" >
            <div class="carousel-inner" >
                <div th:class="${imgStat.index}==0? 'carousel-item active' : 'carousel-item'"
                     th:each="img,imgStat: ${house.getImgAddress()}">
                    <img th:src="${'https://airent-1303816068.cos.ap-shanghai.myqcloud.com/'+img}" class="d-block w-100 center-block" alt="...">
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>

<div id="desc-nav">
    <div class="row col-md-10 offset-md-1">
        <div class="col-md-8">
            <nav id="navbar" class="navbar navbar-light bg-light col-md-12 house-desc-card">
                <ul class="nav nav-pills nav-table">
                    <li class="nav-item">
                        <a class="nav-link" href="#desc">房源描述</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#equip">房屋设施</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#charge">额外缴费</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#map">地图</a>
                    </li>
                </ul>
            </nav>
            <div data-spy="scroll" data-target="#navbar-example2" data-offset="0">

                <div id="desc" class="card mb-12 house-desc-card animate__animated animate__flipInX"
                     style="max-width: 50rem;">
                    <div class="card-header">
                        <h5 class="card-title">房源描述</h5>
                    </div>
                    <div class="card-body text-dark">
                        <p class="card-text" th:text="${house.getContent()}">房源描述内容：xxx</p>
                    </div>
                </div>
                <div id="base" class="card mb-12 house-desc-card animate__animated animate__flipInX"
                     style="max-width: 50rem;">
                    <div class="card-header">
                        <h5 class="card-title">基本信息</h5>
                    </div>
                    <div class="card-body text-dark">
                        <div class="row">
                            <div class="col-md-10 offset-md-1 row">
                                <div class="base-message col-md-6">
                                    <label>楼层：<span th:text="${house.getFloor()}"></span></label>
                                </div>
                                <div class="base-message col-md-6">
                                    <label>朝向：<span th:text="${house.getOrientation()}"></span></label>
                                </div>

                                <div class="base-message col-md-6">
                                    <label>押付方式：<span th:text="${house.getPayment()}"></span></label>
                                </div>

                                <div class="base-message col-md-6">
                                   <!-- <label>小区：<span th:text="${house.getVillageName()}" id="araaName"></span></label>-->
                                    <input type="hidden" th:value="${house.villageName}" id="areaName">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="equip" class="card mb-12 house-desc-card animate__animated animate__flipInX"
                     style="max-width: 50rem;">
                    <div class="card-header">
                        <h5 class="card-title">房屋设施</h5>
                    </div>
                    <div class="card-body text-dark">
                        <div class="row">
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-xiyiji"></use>
                                </svg>
                                </p>
                                <div th:class="${#lists.contains(house.fac,'洗衣机')}?'icon-name':'icon-name nocontain'">洗衣机</div>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-bingxiang"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'冰箱')}?'icon-name':'icon-name nocontain'">冰箱</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianshi"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'电视')}?'icon-name':'icon-name nocontain'">电视</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-kongtiao"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'空调')}?'icon-name':'icon-name nocontain'">空调</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-diancilu"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'电磁炉')}?'icon-name':'icon-name nocontain'">电磁炉</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-WiFi"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'WiFi')}?'icon-name':'icon-name nocontain'">WiFi</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-nuanqi"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'暖气')}?'icon-name':'icon-name nocontain'">暖气</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-kaoxiang"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'烤箱')}?'icon-name':'icon-name nocontain'">烤箱</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-diannao"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'电脑')}?'icon-name':'icon-name nocontain'">电脑</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-chuifengji"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'吹风机')}?'icon-name':'icon-name nocontain'">吹风机</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-duliweiyu"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'独立卫浴')}?'icon-name':'icon-name nocontain'">独立卫浴</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianti"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.fac,'电梯')}?'icon-name':'icon-name nocontain'">电梯</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="charge" class="card mb-12 house-desc-card animate__animated animate__flipInX"
                     style="max-width: 50rem;">
                    <div class="card-header">
                        <h5 class="card-title">额外缴费</h5>
                    </div>
                    <div class="card-body text-dark">
                        <div class="row">
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-shuifei"></use>
                                </svg>
                                </p>
                                <div th:class="${#lists.contains(house.pay,'水费')}?'icon-name':'icon-name nocontain'">水费</div>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-dianfeijiaofei"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.pay,'电费')}?'icon-name':'icon-name nocontain'">电费</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-qifei"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.pay,'煤气费')}?'icon-name':'icon-name nocontain'">煤气费</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-icon_tingchejiaofei-copy"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.pay,'停车费')}?'icon-name':'icon-name nocontain'">停车费</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-wangluo"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.pay,'网费')}?'icon-name':'icon-name nocontain'">网费</p>
                            </div>
                            <div class="col-md-2">
                                <p class="card-text"><svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-wuguanfei"></use>
                                </svg>
                                </p>
                                <p th:class="${#lists.contains(house.pay,'物业费')}?'icon-name':'icon-name nocontain'">物业费</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="map" class="card  mb-12 house-desc-card animate__animated animate__flipInX"
                     style="max-width: 50rem;">
                    <div class="card-header">
                        <h5 class="card-title">地图</h5>
                    </div>
                    <div id="map-box" class="card-body text-dark">
                        <div id="container"></div>

                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-2">
            <div class="card house-man-card animate__animated animate__flipInX" style="width: 18rem;">
                <img th:src="${house.getUser().getUserImg()}" class="card-img-top user-img" alt="" onerror="onerror=null;src='../imgs/userimg.jpg'">
                <div class="card-body house-man-title">
                    <h5 class="card-title" th:text="${house.getUser().getUserName()}">房东用户名</h5>
                </div>
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">最早入住日期: <span th:text="${#dates.format(house.getLiveDate(),'yyyy-MM-dd')}"></span></li>
                    <li class="list-group-item">出租方式: <span th:text="${house.getRentType()}"></span></li>
                    <li class="list-group-item">价格: <span th:text="${house.getRentPrice()}"></span></li>
                </ul>
                <div class="card-body row">
                    <div class="col-md-5 card-icon-link"><a href='javascript:void(0)' class="collect-report"><a
                            href="javascript:void(0)" class="collect">
                        <i class="fa fa-heart collect-icon" th:onclick="|addCol(${house.getHouseId()})|">&nbsp;收藏房源</i></a></a></div>
                    <div class="col-md-5 card-icon-link"><a href='javascript:void(0)' class="collect-report" th:onclick="goReport([[${house.houseId}]],[[${house.houseNumber}]],[[${house.houseResource}]])"><i
                            class="fa fa-thumbs-o-down" aria-hidden="true">&nbsp;举报房源</i></a></div>
                </div>
                <!--<div class="card-body">
                    <a href="javascript:void(0)" onclick="document.getElementById('chat').style.display='block'"
                       class="card-link card-link-button btn btn-outline-success active animate__animated animate__pulse"
                       role="button" aria-pressed="true">在线咨询</a>
                </div>-->
            </div>
        </div>
    </div>
</div>

<!-- 引入底部 -->
<div th:replace="~{food/bottombar::topBar}"></div>

<script th:src="@{/airent/js/iconfont.js}"></script>
<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap-star-rating-master/js/star-rating.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap-star-rating-master/themes/krajee-svg/theme.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap-star-rating-master/js/locales/zh.js}"></script>
<script th:src="@{/airent/plugins/bootstrap-star-rating-master/js/locales/LANG.js}"></script>
<script>
    $(".reply_btn").click(function () {
        $(".reply_textarea").remove();
        $(this).parent().parent().append("<div class='reply_textarea'><textarea name='' cols='40' rows='5'></textarea><br/><input type='submit' value='发表' /></div>");
    });</script>
<script>
    $(document).ready(function () {
        $('.kv-ltr-theme-svg-star').rating({
            hoverOnClear: false,
            theme: 'krajee-svg',
            step: 1,
            language: 'zh',
            starCaptions: { 1: '很差', 2: '较差', 3: '中等', 4: '良好', 5: '很好' },
            starCaptionClasses: { 1: 'text-danger', 2: 'text-warning', 3: 'text-info', 4: 'text-primary', 5: 'text-success' }
        });
    });
</script>
<script th:inline="javascript">
    function addCol(id) {
        var url =[[@{/houseCol/isCollection}]]
        $.post(url,"houseId="+id,function (data) {
            if(data=='1'){
                alert("请勿重复收藏")
            }else if(data=='2'){
                alert("请先登录")
                location.href="/login_register.html"
            } else {
                var url =[[@{/houseCol/addHouseCol}]]
                $.post(url,"houseId="+id,function (data) {
                    if (data == '1') {
                        alert("收藏成功!!!")
                    }else {
                        alert("收藏失败!!");
                    }
                });
            }
        });
    }
    function goReport(houseId,houseNumber, houseTitle) {
       // alert(houseId);
        var url = /*[[@{/report1}]]*/
            location.href=url+'?houseNumber='+houseNumber+'&houseTitle='+houseTitle+'&houseId='+houseId;
    }
</script>

<script type="text/javascript">

    var map = new BMap.Map("container");
    // 创建地图实例
    var point = new BMap.Point(116.404, 39.915);
    // 创建点坐标
    map.centerAndZoom(point, 15);
    // 初始化地图，设置中心点坐标和地图级别
    var areaName=$("#areaName").val();

    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    local.search(areaName);

   /* window.onload = function locationcity() {
        function myFun(result) {
            var cityName = result.name;
            var outer = document.getElementById("cityname");
            map.setCenter(cityName);
            outer.innerText = cityName;
        }
        var myCity = new BMap.LocalCity();
        myCity.get(myFun);
    }*/
    var top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
    var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL }); //右上角，仅包含平移和缩放按钮
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    map.addControl(top_right_navigation);
    map.enableScrollWheelZoom();

    var content = '<div style="margin:0;line-height:20px;padding:2px;">' +
        '<img src="../img/baidu.jpg" alt="" style="float:right;zoom:1;overflow:hidden;width:100px;height:100px;margin-left:3px;"/>' +
        '地址：北京市海淀区上地十街10号<br/>电话：(010)59928888<br/>简介：百度大厦位于北京市海淀区西二旗地铁站附近，为百度公司综合研发及办公总部。' +
        '</div>';

    //创建检索信息窗口对象
    var searchInfoWindow = null;
    searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
        title: "百度大厦",      //标题
        width: 290,             //宽度
        height: 105,              //高度
        panel: "panel",         //检索结果面板
        enableAutoPan: true,     //自动平移
        searchTypes: [
            BMAPLIB_TAB_SEARCH,   //周边检索
            BMAPLIB_TAB_TO_HERE,  //到这里去
            BMAPLIB_TAB_FROM_HERE //从这里出发
        ]
    });
    var marker = new BMap.Marker(point); //创建marker对象

    marker.addEventListener("click", function (e) {
        searchInfoWindow.open(marker);
    })
    map.addOverlay(marker); //在地图中添加marker



    //页面加载完毕后开始执行的事件



</script>
</body>

</html>
